<template>
  <el-row v-if="fieldValue">
    <el-col :span="24">
      <template v-for="(item,inx) in dataArr">
        <el-row :key="inx" style="margin-bottom:20px;">
          <el-col :span="18">
            <el-input :key="inx" v-model="item.appoint_id" @change="setValue" class="input-with-select">
                <el-select v-model="item.if_goods" slot="prepend" placeholder="请选择">
                  <el-option label="商品分类ID" :value="1"></el-option>
                  <el-option label="指定商品ID" :value="2"></el-option>
                </el-select>
              <template slot="append">请填写对应的ID</template>
            </el-input>
          </el-col>
          <el-col :span="6" >
            <el-button type="danger" icon="el-icon-delete" @click="delInput(inx)">删除</el-button>
          </el-col>
        </el-row>
      </template>
    </el-col>
    <el-col :span="24" style="margin-top:20px;">
      <el-row>
        <el-col :span="18">
          <div style="height:30px;"></div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-plus" @click="addInput">添加</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>

export default {
  props: {
    value: {
      type: Array,
      defalut: () => ['']
    }
  },
  data() {
    return {
      dataArr:  this.value,
    }
  },
  computed: {
    fieldValue: {
      get() {
        return this.value || [];
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
   watch: {
      value(val) {
        this.dataArr = [...val]
      },
     
   },
  methods: {
    addInput() {
      this.dataArr.push({
        if_goods:1,
        appoint_id:0
      });
      this.setValue();
    },
    delInput(inx) {
      this.dataArr.splice(inx, 1);
      this.setValue();
    },
    setValue(){
      this.$emit('input', this.dataArr)
    }
  }
}
</script>


<style>
  .input-with-select .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>